{% extends "include/base.html" %}

{% block title %}Dashboard{% endblock %}
 
{% block document_ready %}
   {% if logged_in %}
    $.dashboard_init({{data.widget_registry_json}},"{{host}}");
    $.connections_init();
   {% endif %}
{% endblock %}


{% block style %}

#content { padding-top: 260px; }
{% if not logged_in %}
	#content { padding-top: 100px; }
{% endif %}




#dashboards { height: 30px; padding: 0 0; }
.dashboard-tab { 
	cursor:default;
	border-bottom: none; 
	float:left; 
	margin-top: 4px;
	padding: 6px 7px 6px 7px; 
	margin-right: 10px;
	color: #ddd;
	font-size: 14px;
	line-height: 14px;
	background: #B7B4AD;
	height: 14px;
	border:1px solid #B0B1B0;
	-moz-box-shadow: 0px 2px 10px #ccc; /* Firefox */
	-webkit-box-shadow: 0px 2px 10px #ccc; /* Safari, Chrome */
	box-shadow: 0px 2px 10px #ccc; /* CSS3 */
	border-bottom: none; cursor: pointer; cursor: hand;
}
.cell-selected {margin-top: 0; padding: 7px 7px 8px 7px;;color: #949696; background:#F7F5EF; cursor: default;}


#connections-button{
	font-size:13px;
	border:1px solid #464543;
	font-family:Helvatics Neue, Helvetica, Arial;
	float:left;
	padding: 5px 10px;
	cursor:pointer;
	color:#cfcfcf;
	-moz-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
    margin:2px 10px;
    background-color:#464543;
	}

#grid_wrapper {border:1px solid #B0B1B0;
	-moz-border-radius: 0 5px 5px 5px;
    border-radius: 0 5px 5px 5px;
    padding: 15px 10px;
    background: #fff;
    -moz-box-shadow: 0px 2px 10px #ccc; /* Firefox */
	-webkit-box-shadow: 0px 2px 10px #ccc; /* Safari, Chrome */
	box-shadow: 0px 2px 10px #ccc; /* CSS3 */
 }
#grid { height: 958px;
}
.widget-grid-cell{ background-color:#f8f8f8; 
    border-radius: 10px;
    border: 1px solid #E1E1E1;
	/* flip animations for webkit 
	-webkit-animation: flipping-cell 0.5s;
	-webkit-transition: 0.5s;*/
}
@-webkit-keyframes flipping-cell {
	0%{	
	-webkit-perspective: 1000;
	-webkit-transform-style: preserve-3d;
	-webkit-transform: rotateY(0deg);
	}
	99%{
	-webkit-perspective: 1000;
	-webkit-transform-style: preserve-3d;
	-webkit-transform: rotateY(180deg);	
	}
	100%{
	-webkit-transform-style: flat;
	-webkit-transform: rotateY(0deg);	
	}
}

.widget-grid-cell .ui-icon {background: url(/static/image/blank.png);}
 

.bgcell { border: 1px dashed #E1E1E1;}
.ui-over { background-color: #E7E7E7; }
.widget-drag-handle {  
    width: 100%; height: 11px; 
    border-top-left-radius: 10px; border-top-right-radius: 10px; 
    background-color: #83c1bc;
    border-bottom: 1px solid #999;
}


    
.widget-title { font-family: Georgia; font-size: 16px; color: #777;}

.widget-action-bar { width: 100%; border-top: 1px solid #E1E1E1;}
.widget-action-text {padding: 5px 10px;}
.widget-action-text a { font-family: Georgia; font-size: 13px; color: #568CC0; text-decoration: none;}
.widget-edit-button { width:10px; height: 5px; background: url(/static/image/edit_widget_button.png); }

.widget-props-panel { 
    background-color: #828282;
    border-radius: 10px; 
}

.widget-props-container  { 
/*height: 200px; overflow-x: none; overflow-y: auto;*/
color: #ffffff;
 } 
.widget-props { margin: 10px 0 20px 0; }
.widget-delete-button { width:18px; height: 18px; background: url(/static/image/widget_close_button.png); }
.widget-done-button { width:70px; height: 29px; background: url(/static/image/widget_done_button.png); }

.widget-state {padding: 2px 40px 5px 10px; color: #ffffff; font-family: georgia; font-size: 14px; border-bottom: 1px solid #B6B9BA;}

.widget-connection-container, 
.widget-selector-container {
	padding: 4px 10px;
}
.widget-connection-container select, 
.widget-selector-container select {
	width: 140px;
	border: none; border-top: 1px solid #E1E1E1;
	background: #c3c6c7;
	color: #979797;
	padding:3px;
}

.widget-props {border-bottom: 1px solid #B6B9BA;}
.widget-props .item {padding: 5px 10px; clear: both}
.widget-props .item .label {
	width: 80px; float: left;
	
}
.widget-props .item input,
.widget-props .item select {
	width: 120px;
	border: none; border-top: 1px solid #E1E1E1;
	background: #c3c6c7;
	color: #979797;
	padding:3px;
}
.widget-props .item select {
	width: 124px; 
}

ul {
  padding:0;
  margin:0;
}

#google_analytics_get_page_views .widget-drag-handle,
#google_analytics_get_site_visit .widget-drag-handle,
#google_analytics_get_page_per_visit .widget-drag-handle,
#google_analytics_get_bounce_rate .widget-drag-handle,
#google_analytics_get_referrers .widget-drag-handle,
#google_analytics_get_absolute_unique_visitors .widget-drag-handle,
#google_analytics_get_absolute_unique_browsers .widget-drag-handle,
#google_analytics_get_absolute_unique_connection_speed .widget-drag-handle,
#google_analytics_get_absolute_avg_time_on_site .widget-drag-handle,
#google_analytics_get_percent_new_visits .widget-drag-handle {
	background-color: #A8C683 !important;
}

#google_analytics_get_page_views .widget-icons,
#google_analytics_get_site_visit .widget-icons,
#google_analytics_get_page_per_visit .widget-icons,
#google_analytics_get_bounce_rate .widget-icons,
#google_analytics_get_referrers .widget-icons,
#google_analytics_get_absolute_unique_visitors .widget-icons,
#google_analytics_get_absolute_unique_browsers .widget-icons,
#google_analytics_get_absolute_unique_connection_speed .widget-icons,
#google_analytics_get_absolute_avg_time_on_site .widget-icons,
#google_analytics_get_percent_new_visits .widget-icons {
	background-image: url(/static/image/icon-google_analytics.png);
}


#facebook_get_video_likes .widget-drag-handle,
#facebook_get_album_likes .widget-drag-handle,
#facebook_get_page_likes .widget-drag-handle,
#facebook_get_friends .widget-drag-handle {
	background-color: #558CC2 !important;
}

#facebook_get_video_likes .widget-icons,
#facebook_get_album_likes .widget-icons,
#facebook_get_page_likes .widget-icons,
#facebook_get_friends .widget-icons {
	background-image: url(/static/image/icon-facebook.png);
}


#twitter_get_hashtag_search .widget-drag-handle,
#twitter_get_retweets .widget-drag-handle,
#twitter_get_mentions .widget-drag-handle,
#twitter_get_tweets .widget-drag-handle,
#twitter_something .widget-drag-handle,
#twitter_get_followers .widget-drag-handle {
	background-color: #4ABFDF !important;
}

#twitter_get_hashtag_search .widget-icons,
#twitter_get_retweets .widget-icons,
#twitter_get_mentions .widget-icons,
#twitter_get_tweets .widget-icons,
#twitter_something .widget-icons,
#twitter_get_followers .widget-icons{
	background-image: url(/static/image/icon-twitter.png);
}



#you_tube_get_channel_subscribers .widget-drag-handle,
#you_tube_get_channel_views .widget-drag-handle,
#you_tube_get_views .widget-drag-handle{
	background-color: #FC7956 !important;
}

#you_tube_get_channel_subscribers .widget-icons,
#you_tube_get_channel_views .widget-icons,
#you_tube_get_views .widget-icons{
	background-image: url(/static/image/icon-you_tube.png);
}


#vimeo_get_views .widget-drag-handle,
#vimeo_get_channel_views .widget-drag-handle {
	background-color: #F7CA3B !important;
}

#vimeo_get_views .widget-icons,
#vimeo_get_channel_views .widget-icons {
	background-image: url(/static/image/icon-vimeo.png);
}


#custom_text .widget-drag-handle,
#custom_embed .widget-drag-handle,
#custom_manual_or_xml .widget-drag-handle {
	background-color: #FFAE55 !important;
}

#custom_text .widget-icons,
#custom_embed .widget-icons,
#custom_manual_or_xml .widget-icons {
	background-image: url(/static/image/icon-custom.png);
}

#impact_correlation .widget-drag-handle {background-color: #FFAE55;}
#impact_correlation .widget-icons {background-image: url(/static/image/icon-custom.png);}
	








/* Widget Styles */
#twitter_get_followers {
	
	background-position: 190px 20px;
	background-repeat: no-repeat;
}
.widget-label {font-family: Georgia; font-size: 16px; color: #777; margin: 0 30px 30px 0; font-weight: 400;}
.widget-value {font-family: 'TradeGothicW02-BoldCn20 675505', 'helvetica CY', 'Arial Narrow'; font-weight: 700; font-size: 96px; line-height: 80px; color: #414042;}
.small {font-family: Georgia; font-size: 13px; color: #777;}
hr{color:#f1f1f1}

/* Widget Icons */
.widget-icons {
	position: absolute; top: 0px; right: 0px;
	background-image: url(/static/image/icon_twitter.png);
	width: 24px; height: 24px;
	text-indent: -999em;
}


/* Dashboard Options */
.dashboard-options {
	margin: -10px; 
	padding: 0 15px 5px 0;
	border-bottom: 1px solid #bdbdbd
}
.dashboard-options a {
	display: block; float: right; margin-left: 10px;
	text-indent: -999em;
	height: 19px;
	background-repeat: no-repeat;
	background-image: url(/static/image/dashboard-nav.png);
}
.dashboard-options a.dashboard-settings {width: 80px; background-position:0 0;}
.dashboard-options a.dashboard-saveas {width: 70px; background-position: 0 -50px;}
.dashboard-options a.dashboard-embed {width: 70px; background-position: 0 -100px; }


#dashboard-embed-code {width: 470px; height: 120px; background: #666; border: 1px solid #555; color: #a5a5a5;
font-size: 12px;}


/* resizable overrides! */
.ui-bordered { border: 1px solid #e1e1e1; }
.ui-resizable-helper { border: 1px dotted #444; }
.ui-resizable-e { width: 0px; right: 0px; }
.ui-resizable-s { width: 0px; right: 0px; }





{% endblock %}
 
 
 
{% block subnav %}
{% if logged_in %}
<div id="widget-chooser">

    <div id='widget-tabs-wrapper'>
    	<div id='widget-tabs-wrapper2'>
    	<div class="slider_arrow">hello</div>
    
    <ul id="widget-tabs">
{% for wc in data.widget_categories %}
{% ifnotequal wc.key.name "correlation" %}
        <li><a href="#widgets-{{wc.key.name}}">{{ wc.name }}</a></li>
{% endifnotequal %}
{% endfor %}
	<div id="connections-button">Connections <span id="connection-count">0</span></div>

<div class='clear'></div>
    </ul>
    <div class="clear"></div>
    </div>
    </div>

    <div id="widget-category-bg">&nbsp;</div>
    
<div id="widget-category-wrapper">
{% for wc in data.widget_categories %}
{% ifnotequal wc.key.name "correlation" %}
    <div id="widgets-{{wc.key.name}}" class="widget-category"><span class="wrap">
{% for w in wc.widgets %}
        <div class="widget-def" id="widget-{{w.key.name}}"><img src="/static/image/btn-{{wc.key.name}}.png" /><div class="widget-def-label">{{ w.name }}</div></div>
{% endfor %}
    </span></div>
{% endifnotequal %}
{% endfor %}

</div>

</div>
{% endif %}
{% endblock %}



 
{% block content %}
<div id="dashboards">
    <ul>
        
    </ul>
</div>

<div id="grid_wrapper">
{% if logged_in %}
	<div class="dashboard-options">
		<a href="#embed" class="dashboard-embed">Embed</a>
		<a href="#saveas" class="dashboard-saveas">Save As</a>
		<a href="#settings" class="dashboard-settings">Settings</a>
		<div class="clear"></div>
	</div>
{% endif %}
<div id="grid" style="margin-top: 25px;">
{% if not logged_in %}
This version of the Dashboard requires log in.
{% endif %}
</div></div>




{% if logged_in %}
<div id="dashboard-embed" style="z-index:999999999999999;">
<br />
<textarea id="dashboard-embed-code" rows="4" cols="60">xxxx</textarea>
</div>
{% endif %}


{% if logged_in %}
<style>
#connections-content {
	background-color: #333;
	corder-radius: 10px;
	padding: 20px;
	color: #eee;
	font-size: 10px;
	overflow: auto;
	z-index: 1000;
	display:none;
	width: 765px;
}
#connections-content .ui-icon-close { background-color: #eee; } 
#connections-content .small { font-size: 10px; }
#connections .item { margin-top: 10px; }
</style>
<div id="connections-content">
	<div>
		<h3>Connections</h3>
		
		Add a new connection:
		<button id="create-facebook-authorization-button">FB</button>
		<button id="create-twitter-authorization-button"> Twitter </button>
		<button id="create-google-analytics-authorization-button"> Analytics </button>
		<button id="create-youtube-authorization-button"> YouTube</button>
		<button id="create-vimeo-authorization-button"> Vimeo </button>
	</div>
	<table cellspacing="0" cellpadding="0" border="0">
		<tr>
		<td width="23"></td>
		<td width="195">Service and Status</td>
		<td width="195">Connection Account and Target</td>
		<td width="150">Last Updated</td>
		<td width="150">Connected Since</td>
		</tr>
	</table>
	<div id="connections"></div>
</div>
{% endif %}

<br/>

<!--div id="dashboard-export">
Export CSV
</div-->
<p>&nbsp;</p>

   
{% endblock %}